<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据循环</title>
  <script src="angular.js"></script>
</head>
<body>
  <div ng-app="" ng-init="items=[2,5,3,2];json={'a':1,'b':2,'c':3}">
    <ul>
      <!-- track by 指定唯一key。
        angular出于性能考虑需要数据和视图有一一对应的关系，这里数组出现重复数据不指定唯一key会报错 -->
      <!-- 使用track by 也会导致删除数组一个元素后$index全部发生了改变，视图又要重新渲染 -->
      <li ng-repeat="(index,item) in items track by $index">{{index}}-{{item}}</li>
    </ul>
    <!-- 另一点值得注意的就是当item是数组或者对象时即使内容相同也不需要指定唯一key，因为数组或对象的即使内容相同，当时其都是new Array或者new Object出来的新对象，并不相等，如下代码测试： -->
      <button onclick="check0()">button0</button>
      <button onclick="check1()">button1</button>
      <button onclick="check2()">button2</button>
      <button onclick="check3()">button3</button>

      <ul>
        <!-- 这里不能用$Index,因为这个是下标顺序 -->
        <li ng-repeat="(key,value) in json">{{key}}-{{value}}</li>
      </ul>
  </div>

  <script>
      function check0(){
        alert("1==1："+(1==1));
      }
      function check1(){
        alert("'a'=='a'："+('a'=='a'));
      }
      function check2(){
        alert("[1,2,3]==[1,2,3]："+([1,2,3]==[1,2,3]));
      }

      function check3(){
        alert('{"name":"ion","age":22}=={"name":"ion","age":22}：'+({"name":"ion","age":22}=={"name":"ion","age":22}));
      }
  </script>
</body>
</html>